/* =========================================================
   ALL-IN-ONE SCOPED CSS
   Applies ONLY inside .gh-scope-001
   Fixes:
   - Header + fields left alignment
   - Responsive card width/padding
   - Checkbox + label same line (no stacking)
   ========================================================= */

/* --- Scoped variables + base text styles --- */
.gh-scope-001 {
  --full-width: 1090px;
  --font-primary: "Inter", sans-serif;

  --color-black: #1b1b1b;
  --color-white: #ffffff;
  --color-blue: #03647a;
  --color-green: #c1fd3b;

  --color-primary: #1eaedb;
  --color-primary-hover: #0fa0ce;

  --hero-color: #b5c8c7;
  --color-light-grey: #f3f3f3;

  font-size: 16px;
  font-family: var(--font-primary);
  line-height: 1.5;
  font-weight: 300;
  color: var(--color-black);

  box-sizing: border-box;
}

.gh-scope-001 *,
.gh-scope-001 *::before,
.gh-scope-001 *::after {
  box-sizing: inherit;
}

/* ---------------------------------------------------------
   CARD: Centered + responsive + unified padding for header/fields
   IMPORTANT: Your outer div has BOTH classes:
   class="gh-scope-001 contact__form"
--------------------------------------------------------- */
.gh-scope-001.contact__form {

  width: 100% !important;
  max-width: 100% !important;   /* removes the cap */
  margin: 0 !important;  

  padding: 20px 25px;              /* SAME padding for header + fields */
  background: var(--color-white);
  border-top: 8px solid var(--color-green);
}

/* Mobile padding */
@media (max-width: 480px) {
  .gh-scope-001.contact__form { padding: 18px 18px; }
}

/* ---------------------------------------------------------
   Header label alignment
   (Your label is OUTSIDE the <form>, so we align via card padding)
--------------------------------------------------------- */
.gh-scope-001 > .elq-label {
  display: block;
  margin: 0 0 12px 0;
  padding: 0 !important;
  font-size: 18px;
  line-height: 27px;
  font-weight: 700; /* matches screenshot weight */
}

/* ---------------------------------------------------------
   Remove inline padding on the form
   Your form has inline style padding-left/right:25px
--------------------------------------------------------- */
.gh-scope-001 form.elq-form {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------
   Inputs/selects
--------------------------------------------------------- */
.gh-scope-001 input[type="text"],
.gh-scope-001 input[type="email"],
.gh-scope-001 input[type="number"],
.gh-scope-001 input[type="search"],
.gh-scope-001 input[type="tel"],
.gh-scope-001 input[type="url"],
.gh-scope-001 input[type="password"],
.gh-scope-001 select,
.gh-scope-001 textarea {
  width: 100% !important;
  height: 38px;
  padding: 8px 12px;
  background: var(--color-light-grey);
  border: none;
  border-radius: 0 !important;
  box-shadow: none;
  color: var(--color-black);
}

.gh-scope-001 textarea { min-height: 80px; }

.gh-scope-001 input[type="text"]:focus,
.gh-scope-001 input[type="email"]:focus,
.gh-scope-001 select:focus,
.gh-scope-001 textarea:focus {
  outline: 0;
  border: 1px solid var(--color-blue);
}

/* Space between fields (compact but readable) */
.gh-scope-001 input,
.gh-scope-001 select,
.gh-scope-001 textarea {
  margin-bottom: 14px;
}

/* ---------------------------------------------------------
   Submit button styling
--------------------------------------------------------- */
.gh-scope-001 input[type="submit"],
.gh-scope-001 input[type="Submit"] {
  display: inline-block;
  background: var(--color-green);
  color: var(--color-black);
  border: 1px solid var(--color-green);
  padding: 10px 36px;
  font-weight: 700;
  cursor: pointer;
}

.gh-scope-001 input[type="submit"]:hover,
.gh-scope-001 input[type="Submit"]:hover {
  background: transparent;
  border-color: var(--color-black);
}

/* ---------------------------------------------------------
   ✅ CHECKBOX FIX (this is the main issue in your screenshot)
   Goal: checkbox and label appear on the SAME LINE.
   Eloqua/Bootstrap-like .row sometimes forces stacking.
--------------------------------------------------------- */

/* 1) Force the checkbox wrapper to be a horizontal flex row */
.gh-scope-001 .single-checkbox-row,
.gh-scope-001 .single-checkbox-row.row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 10px !important;

  /* neutralize common .row styles */
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* 2) Force checkbox itself to behave like an inline/flex item */
.gh-scope-001 .single-checkbox-row input[type="checkbox"] {
  flex: 0 0 auto !important;
  width: 14px !important;           /* explicit size prevents “full-width” bugs */
  height: 14px !important;
  margin: 3px 0 0 0 !important;      /* aligns with first text line */
  padding: 0 !important;
  display: inline-block !important;
  vertical-align: top !important;
  box-shadow: none !important;
}

/* 3) Force label to sit BESIDE checkbox and wrap normally */
.gh-scope-001 .single-checkbox-row label.checkbox-aligned,
.gh-scope-001 .single-checkbox-row label.elq-item-label {
  flex: 1 1 auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
  font-size: 14px !important;
  white-space: normal !important; /* wrapping allowed (you said OK) */
}

/* 4) Reduce extra spacing between checkbox sections */
.gh-scope-001 #formElement8,
.gh-scope-001 #formElement9 {
  margin-top: 4px;
}

.gh-scope-001 #formElement8 input,
.gh-scope-001 #formElement9 input {
  margin-bottom: 0; /* avoid big gaps caused by generic input spacing */
}

/* 5) Eloqua validation helpers (safe) */
.gh-scope-001 .LV_valid { display: none; }
.gh-scope-001 .LV_invalid { color: red !important; }



/* REMOVE LEFT / RIGHT GRID GUTTERS INSIDE FORM ONLY */
.gh-scope-001 .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.gh-scope-001 .col-xs-12,
.gh-scope-001 .col-sm-12,
.gh-scope-001 .grid-layout-col,
.gh-scope-001 .layout-col {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* REMOVE EXTRA SPACE BELOW SUBMIT BUTTON */
.gh-scope-001 #formElement10 {
  margin-bottom: 0 !important;
}

.gh-scope-001 #formElement10 .row {
  margin-bottom: 0 !important;
}

.gh-scope-001 #formElement10 input[type="submit"],
.gh-scope-001 #formElement10 input[type="Submit"] {
  margin-bottom: 0 !important;
}




</style>